<template>
    <div>
        <n-table :bordered="false" :single-line="false">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>地址</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(v, i) in store" :key="i">
                    <td>{{ i+1 }}</td>
                    <td>{{ v.name }}</td>
                    <td>{{ v.age }}</td>
                    <td>{{ v.dizhi }}</td>
                    <td>
                        <n-button type="primary" class="btn" @click="">
                            编辑
                        </n-button>
                        <n-button type="error" class="btn" @click="del(i)">
                            删除
                        </n-button>
                    </td>
                </tr>
            </tbody>
        </n-table>
    </div>
</template>

<script setup>
import { useCounterStore } from '@/stores/counter.js'

let store = useCounterStore().count

function del(i){
    store.splice(i,1)
}
</script>

<style scoped>
.btn{
    margin: 0 10px;
}</style>